import {
  reqGetDepartments,
  reqGetHospitalScheduleRules,
  reqGetHospitalSchedules,
} from "@/api/hospital/hospitalList";
import {
  Departments,
  HospitalScheduleResponse,
  ScheduleRules,
} from "@/api/hospital/model/hospitalListTypes";
import { Card, Col, Pagination, Row, Tag } from "antd";
import Table, { ColumnsType } from "antd/lib/table";
import Tree, { DataNode } from "antd/lib/tree";
import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";

export default function HospitalSchdule() {
  //树状结构的数据
  const treeData: DataNode[] = [
    {
      title: "parent 1",
      key: "0-0",
      children: [
        {
          title: "parent 1-0",
          key: "0-0-0",
          disabled: true,
          children: [
            {
              title: "leaf",
              key: "0-0-0-0",
              disableCheckbox: true,
            },
            {
              title: "leaf",
              key: "0-0-0-1",
            },
          ],
        },
        {
          title: "parent 1-1",
          key: "0-0-1",
          children: [
            {
              title: <span style={{ color: "#1890ff" }}>sss</span>,
              key: "0-0-1-0",
            },
          ],
        },
      ],
    },
  ];

  //声明表格的结构
  let columns: ColumnsType<any> = [
    {
      title: "序号",
      render: (x: any, y: any, index: number) => {
        return index + 1;
      },
    },
    {
      title: "职称",
      dataIndex: "title",
    },
    {
      title: "号源时间",
      dataIndex: "workDate",
    },
    {
      title: "总预约数",
      dataIndex: "reservedNumber",
    },
    {
      title: "剩余预约数",
      dataIndex: "availableNumber",
    },
    {
      title: "挂号费(元)",
      dataIndex: "amount",
    },
    {
      title: "擅长技能",
      dataIndex: "skill",
    },
  ];

  //计算左侧树状结构的高度
  let height =
    document.documentElement.clientHeight - 64 - 34 - 24 * 2 - 22 - 10;

  //声明科室的状态
  let [departments, setDepartments] = useState<Departments>([]);
  //获取展开科室的id
  let [expandedKeys, setExpandedKeys] = useState<string[]>([]);
  //获取 hoscode 参数
  let { id } = useParams();
  //声明分页相关的状态
  let [current, setCurrent] = useState(1);
  let [pageSize, setPageSize] = useState(5);
  let [total, setTotal] = useState(0);
  //声明排班规则的状态
  let [scheduleRules, setScheduleRules] = useState<ScheduleRules>([]);
  //排班医生的信息
  let [doctors, setDoctors] = useState<HospitalScheduleResponse>([]);
  //设置医院名称的状态
  let [hosname, setHosname] = useState("");
  //设置科室的名称
  let [depname, setDepname] = useState("");
  //设置科室的编号
  let [depcode, setDepcode] = useState("");
  //设置挂号日期
  let [workDate, setWorkDate] = useState("");

  //声明函数
  let getDepartments = async () => {
    //获取科室的信息
    let res = await reqGetDepartments(id as string);
    //设置第一级科室为禁用状态
    res = res.map((item) => {
      return {
        ...item,
        disabled: true,
      };
    });
    //设置科室的状态
    setDepartments(res);
    //展开所有的一级科室
    setExpandedKeys(res.map((item) => item.depcode));
    //获得 depcode
    let depcode = res[0].children ? res[0].children[0].depcode : "";
    let depname = res[0].children ? res[0].children[0].depname : "";

    //设置科室编号
    setDepcode(depcode);
    //设置科室的名称
    setDepname(depname);
  };

  //声明新函数 获取排班规则数据
  let getScheduleRules = async () => {
    //发送请求获取排班规则的数据
    let rules = await reqGetHospitalScheduleRules({
      page: current,
      limit: pageSize,
      hoscode: id as string,
      depcode: depcode,
    });
    //设置状态
    setScheduleRules(rules.bookingScheduleList);
    //设置总数的状态
    setTotal(rules.total);
    //获得医院的名称
    setHosname(rules.baseMap.hosname);
    //获取排班列表第一条数据的日期
    let workDate = rules.bookingScheduleList[0]
      ? rules.bookingScheduleList[0].workDate
      : "";
    //设置排班日期
    setWorkDate(workDate);
  };

  //获取医生的函数封装
  let getDoctors = async () => {
    //发送请求
    let doctors = await reqGetHospitalSchedules({
      hoscode: id as string,
      depcode: depcode,
      workDate: workDate,
    });
    //状态的设置
    setDoctors(doctors);
  };

  //切换树状结构的回调
  let changeDepart = (selectedKeys: React.Key[], info: any) => {
    //获取所点科室的编号
    let depcode = info.node.depcode;
    let depname = info.node.depname;
    //设置状态为空
    setDoctors([]);
    //修改状态
    setDepcode(depcode);
    setDepname(depname);
  };

  //调用函数
  useEffect(() => {
    getDepartments();
  }, []);

  useEffect(() => {
    if (depcode) {
      getScheduleRules();
    }
  }, [depcode, current, pageSize]);

  useEffect(() => {
    if(workDate){
      getDoctors();
    }
  }, [workDate]);

  return (
    <Card>
      {/* 顶部路径导航 */}
      <p>
        选择: {hosname} / {depname} / {workDate}
      </p>

      {/* 主体内容  <div class="row"></div>  */}
      <Row gutter={20}>
        {/* 左侧树状结构 */}
        <Col span={6}>
          <div
            style={{
              border: "solid 1px #666",
              overflowY: "scroll",
              height: height,
            }}
          >
            <Tree
              //设置哪些节点默认展开
              expandedKeys={expandedKeys}
              //设置哪些节点默认选中
              selectedKeys={[depcode]}
              //树状结构的数据
              treeData={departments as []}
              //设置属性映射
              fieldNames={{
                key: "depcode",
                title: "depname",
              }}
              //
              onSelect={changeDepart}
            />
          </div>
        </Col>

        {/* 右侧结构 */}
        <Col span={18}>
          {/* 顶部的日期 */}
          <div>
            {scheduleRules.map((item) => {
              return (
                <Tag
                  color={item.workDate === workDate ? "green" : ""}
                  key={item.workDate}
                  onClick={() => {
                    //获得排班日期
                    setWorkDate(item.workDate);
                  }}
                >
                  <div>
                    {item.workDate} {item.dayOfWeek}
                  </div>
                  <div>
                    {item.availableNumber} / {item.reservedNumber}
                  </div>
                </Tag>
              );
            })}
          </div>
          <div className="h-20"></div>
          {/* 分页结构 */}
          <Pagination
            current={current}
            total={total}
            pageSize={pageSize}
            showSizeChanger={true}
            pageSizeOptions={[5, 10, 15, 20]}
            onChange={(page: number, pageSize: number) => {
              //更改状态
              setCurrent(page);
              setPageSize(pageSize);
            }}
          />

          <div className="h-20"></div>
          {/* 表格结构 */}
          <Table columns={columns} bordered dataSource={doctors} rowKey="id" />
        </Col>
      </Row>
    </Card>
  );
}
